
import * as React from 'react';
import { fetch } from '../../../renderers/util';
// import { DatePicker } from 'antd';
import {render} from '../../../renderers/factory';
import * as moment from 'moment';
import './style.scss';
import '../../../node_modules/echarts/map/js/china'

 export default class VolunteerIncrease  extends React.Component {
     constructor(props) {
         super(props);
         this.changePanel = this.changePanel.bind(this);

         this.state = {
             volunteer_count: 0,
             volunteer_yesterday_count: 0,
             tab0: true,
             tab1: false,
         };
     }

     componentDidMount() {
         fetch(`/api/statistics/volunteer/current`)
             .then(ret => this.setState({
                 ...ret.data,
             }));
     }

     changePanel(e) {
         if (!e && !this.state.tab0) {
             this.setState({
                 tab0: true,
                 tab1: false
             })
         }

         if (e && !this.state.tab1) {
             this.setState({
                 tab0: false,
                 tab1: true
             })
         }
     }

     render() {
         const {
             volunteer_count,
             volunteer_yesterday_count,
             tab0,
             tab1,
         } = this.state;
         let defaultRangeDate = moment().add(-60, 'days').format('X') + ',' + moment().format('X'); // 默认dateRange为60天

         return (
             <div>
                 <div className="bg-light b-b wrapper"><h1 className="m-n font-thin h3 text-black">志愿者分析</h1></div>
                 <div className="page-body wrapper">
                     <div className="tabs-wrapper">
                         <div id="tabs" className="">
                             <ul role="tablist" className="nav nav-tabs">
                                 <li role="presentation" className={tab0 ? "active" : ""}
                                     onClick={() => this.changePanel(0)}>
                                     <a id="tabs-tab-0" role="tab" aria-controls="tabs-pane-0" aria-selected="true"
                                        href="#">
                                         用户增长
                                     </a>
                                 </li>
                                 <li role="presentation" className={tab1 ? "active" : ""}
                                     onClick={() => this.changePanel(1)}>
                                     <a id="tabs-tab-1" role="tab" aria-controls="tabs-pane-1" aria-selected="false"
                                        href="#" tabIndex="-1">
                                         用户属性
                                     </a>
                                 </li>
                             </ul>
                         </div>
                     </div>

                     <div className="tab-content">
                         <div id="tabs-pane-0" aria-labelledby="tabs-tab-0" role="tabpanel" aria-hidden="false"
                              className={tab0 ? "tab-pane active fade in" : "tab-pane fade"}>
                             <div className="bg-white b-l b-r b-b wrapper-md">
                                 <div className='info_box'>
                                     <div className="inner">
                                         <div className="info_hd append_ask">
                                             <h4>昨日关键指标</h4>
                                         </div>
                                         <div className="info_bd">
                                             <div className="content" id="js_keydata">
                                                 <table className="ui_trendgrid ui_trendgrid_3">
                                                     <tbody>
                                                     <tr>
                                                         <td className="first">
                                                             <div className="ui_trendgrid_item">

                                                                 <span className="text-color text-md">新增志愿者</span>
                                                                 <div className="h1 text-info font-thin h2">
                                                                     {volunteer_yesterday_count || 0}
                                                                 </div>
                                                             </div>
                                                         </td>
                                                         <td className="first">
                                                             <div className="ui_trendgrid_item">

                                                                 <span className="text-color text-md">累计志愿者</span>
                                                                 <div className="h1 text-info font-thin h2">
                                                                     {volunteer_count || 0}
                                                                 </div>
                                                             </div>
                                                         </td>
                                                     </tr>
                                                     </tbody>
                                                 </table>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                     {/*<h3 className="font-thin m-t-none m-b">请选择保险方案</h3>*/}
                                     <div className="row">
                                         {
                                             render('page', {
                                                 type: 'page',
                                                 title: '',
                                                 bodyClassName: '',
                                                 body: [
                                                     {
                                                         type: "form",
                                                         name: "sample2",
                                                         target: "chart1",
                                                         // reload: "chart1",
                                                         className: "chart-form",
                                                         wrapWithPanel: false,
                                                         submitText: '查询',
                                                         title: '',
                                                         mode: "inline",
                                                         controls:
                                                             [
                                                                 {
                                                                     type: "date-range",
                                                                     name: "date_range",
                                                                     label: "日期范围",
                                                                     joinValues: true,
                                                                     value: defaultRangeDate
                                                                 },

                                                                 {
                                                                     type: "select",
                                                                     name: "org_id",
                                                                     label: "机构查询",
                                                                     placeholder: "机构名称",
                                                                     clearable: true,
                                                                     autoComplete: '/api/org/sug?not_options=1&_=${_}',
                                                                     visibleOn: 'acl.can("org:create")'
                                                                 },
                                                             ]
                                                     },
                                                     {
                                                         type: "chart",
                                                         api: "/api/statistics/volunteer/increase?org_id=${org_id}&date_range=${date_range}",
                                                         interval: false,
                                                         name: 'chart1',
                                                         className: "increase-chart",
                                                     }
                                                 ]

                                             }, this.props)
                                         }
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div id="tabs-pane-1" aria-labelledby="tabs-tab-1" role="tabpanel" aria-hidden="true"
                              className={tab1 ? "tab-pane active fade in" : "tab-pane fade"}>
                             <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                 <legend>性别分布</legend>
                                 <div className="row">
                                     {
                                         render('page', {
                                             type: 'page',
                                             title: '',
                                             bodyClassName: '',
                                             body: [
                                                 {
                                                     type: "chart",
                                                     api: "/api/statistics/volunteer/gender?_=${_}",
                                                     interval: false,
                                                     name: 'chart2',
                                                     className: "gender-chart"
                                                 }
                                             ]

                                         }, this.props)
                                     }
                                 </div>
                             </div>
                             <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                 <legend>年龄分布</legend>
                                 <div className="row">
                                     {
                                         render('page', {
                                             type: 'page',
                                             title: '',
                                             bodyClassName: '',
                                             body: [
                                                 {
                                                     type: "chart",
                                                     api: "/api/statistics/volunteer/age?_=${_}",
                                                     interval: false,
                                                     name: 'chart3',
                                                     className: "age-chart"
                                                 }
                                             ]

                                         }, this.props)
                                     }
                                 </div>
                             </div>

                             <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                 <legend>省份分布</legend>
                                 <div className="row">
                                     {
                                         render('page', {
                                             type: 'page',
                                             title: '',
                                             bodyClassName: '',
                                             body: [
                                                 {
                                                     type: "chart",
                                                     api: "/api/statistics/volunteer/area?_=${_}",
                                                     interval: false,
                                                     name: 'chart4',
                                                     className: "area-chart"
                                                 }
                                             ]

                                         }, this.props)
                                     }
                                 </div>
                             </div>
                             <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                 <legend>城市分布</legend>

                                 <div className="row">
                                     {
                                         render('page', {
                                             type: 'page',
                                             title: '',
                                             className: 'page-province',
                                             bodyClassName: '',
                                             body: [
                                                 // {
                                                 //     type: "form",
                                                 //     name: "form",
                                                 //     target: "chart5",
                                                 //     // reload: "chart1",
                                                 //     // className: "chart-form",
                                                 //     wrapWithPanel: false,
                                                 //     submitText: false,
                                                 //     submitOnChange: true,
                                                 //     title: '',
                                                 //     mode: "inline",
                                                 //     controls:
                                                 //         [
                                                 //             {
                                                 //                 type: "select",
                                                 //                 name: "city_name",
                                                 //                 label: "",
                                                 //                 // placeholder: "机构名称",
                                                 //                 value: '全国',
                                                 //                 clearable: true,
                                                 //                 autoComplete: '/api/statistics/province_info?_=${_}',
                                                 //             },
                                                 //         ]
                                                 // },
                                                 {
                                                     type: "crud",
                                                     api: "get:/api/statistics/volunteer/city",
                                                     columnsTogglable: false,
                                                     showHeader: false,
                                                     filter: {
                                                         title: "",
                                                         panelClassName: 'm-b-none bg-gd no-border',
                                                         bodyClassName: 'wrapper-sm',
                                                         submitText: "",
                                                         submitOnChange: true,
                                                         autoFocus: false,
                                                         controls: [
                                                             {
                                                                 type: "select",
                                                                 name: "city_name",
                                                                 label: "",
                                                                 placeholder: "请选择省份",
                                                                 // placeholder: "机构名称",
                                                                 // value: '全国',
                                                                 clearable: true,
                                                                 autoComplete: '/api/statistics/province_info?_=${_}',
                                                             }
                                                         ]
                                                     },
                                                     columns: [
                                                         {
                                                             name: "city",
                                                             label: "城市",
                                                             width: 100
                                                         },

                                                         {
                                                             name: "value",
                                                             label: "用户数",
                                                             sortable: true,
                                                             width: 100

                                                         },
                                                         {
                                                             type: "progress",
                                                             label: '',
                                                             width: 220,
                                                             name: "progress"
                                                         }
                                                     ]

                                                 }
                                             ],
                                         }, this.props)
                                     }
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         )
     }
 }
const schema = {
    type: "page",
    title: "数据统计分析",

    body: [
        {
            type: 'tabs',
            tabs: [
                {
                    title: '用户增长',
                    tab: [
                        {
                            type: "form",
                            name: "sample2",
                            target: "chart1",
                            className: "chart-form",
                            wrapWithPanel: false,
                            submitText: '查询',
                            title: '',
                            mode: "inline",
                            controls:
                                [
                                    {
                                        type: "date-range",
                                        name: "select",
                                        label: "日期范围",
                                        joinValues: false,
                                        value: {
                                            startDate: moment().add(-7, 'days').format('X'),
                                            endDate: moment().format('X')
                                        }
                                    },

                                    {
                                        type: "select",
                                        name: "org_id",
                                        label: "机构查询",
                                        placeholder: "机构名称",
                                        clearable: true,
                                        autoComplete: '/api/org/sug?not_options=1',
                                        visibleOn: 'acl.can("org:create")'
                                    },
                                ]
                        },
                        {
                            type: "chart",
                            "api": "/api/statistics/volunteer",
                            name: "chart1",
                            style: {
                                backgroundColor: "#fff",
                                paddingTop: "10px"
                            },
                            interval: 3000,
                            config: {
                                title: {
                                    text: '',
                                    // subtext: '纯属虚构'
                                },

                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        label: {
                                            backgroundColor: '#283b56'
                                        }
                                    }
                                },
                                legend: {
                                    // data:['最新成交价', '预购队列']
                                    data: ['最新成交价',]
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        dataView: {readOnly: false},
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                dataZoom: {
                                    show: false,
                                    start: 0,
                                    end: 100
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: (function () {
                                            var now = new Date();
                                            var res = [];
                                            var len = 20;
                                            while (len--) {
                                                console.info();
                                                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                                                now = new Date(now - 2000);
                                            }
                                            console.info(res);
                                            return res;
                                        })()
                                    },
                                    // {
                                    //     type: 'category',
                                    //     boundaryGap: true,
                                    //     data: (function (){
                                    //         var res = [];
                                    //         var len = 10;
                                    //         while (len--) {
                                    //             res.push(10 - len - 1);
                                    //         }
                                    //         return res;
                                    //     })()
                                    // }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        scale: true,
                                        name: '价格',
                                        max: 30,
                                        min: 0,
                                        boundaryGap: [0.2, 0.2]
                                    },
                                    // {
                                    //     type: 'value',
                                    //     scale: true,
                                    //     name: '预购量',
                                    //     max: 1200,
                                    //     min: 0,
                                    //     boundaryGap: [0.2, 0.2]
                                    // }
                                ],
                                series: [
                                    // {
                                    //     name:'预购队列',
                                    //     type:'bar',
                                    //     xAxisIndex: 1,
                                    //     yAxisIndex: 1,
                                    //     data:(function (){
                                    //         var res = [];
                                    //         var len = 10;
                                    //         while (len--) {
                                    //             res.push(Math.round(Math.random() * 1000));
                                    //         }
                                    //         return res;
                                    //     })()
                                    // },
                                    {
                                        name: '最新成交价',
                                        type: 'line',
                                        data: (function () {
                                            var res = [];
                                            var len = 0;
                                            while (len < 20) {
                                                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                                                len++;
                                            }
                                            console.info(res);
                                            return res;
                                        })()
                                    }
                                ]
                            }
                        }
                    ]
                },
                {
                    title: '用户属性',
                    tab: "<p>hello word</p>",
                }

            ]
        },

    ]
};


